<template>
  <div class="import">
    <el-card>
      <h3 class="title">员工导入</h3>
      <UploadExcel :before-upload="beforeUpload" :on-success="onSuccess" />
    </el-card>
  </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel/index.vue'
import { sysUserBatch } from '@/api/employees'
export default {
  components: {
    UploadExcel
  },
  methods: {
    // beforeUpload 读取文件前的回调
    beforeUpload(file) {
      // file:读取的file文件对象
      // return bollean
      // true:正常读取  false:种植读取
      // 常用于限制读取文件类型与大小
      return true
    },

    // onSuccess 读取excel文件成功后的回调函数
    async onSuccess(obj) {
      // data.header:头部数据
      // data.result:列表数据
      // 自定义转换规则
      // console.log(obj)
      const rules = {
        入职日期: 'timeOfEntry',
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        转正日期: 'correctionTime'
      }
      // 循环遍历，生成一个新的数组
      // 通过map循环数组，通过Object.keys 方法转换内部对象为数组，循环遍历
      // 通过生成一个新的对象return出去
      const newArr = obj.results.map((item) => {
        const obj = {}
        Object.keys(item).forEach((key) => {
          obj[rules[key]] = item[key]
        })
        return obj
      })

      // 转换日期格式
      newArr.forEach((item) => {
        Object.keys(item).forEach((key) => {
          if (key === 'timeOfEntry' || key === 'correctionTime') {
            item[key] = this.excelTimetoJs(item[key])
          }
        })
      })
      // console.log(newArr);
      // 调用接口
      await sysUserBatch(newArr)
      this.$message.success('导入成功')
      this.$router.push('/employees')
    },

    // 转换时间格式的函数
    // excel时间转换成js时间
    excelTimetoJs(num) {
      /*
        excel时间：从1900年到现在天数 天数从1开始，时间点是从8点开始计算的
        js时间：1970年开始  从0开始   时间点从0点开始
        excel时间====>js时间
        43535   ===>  2019/3/11
        */
      const t = new Date((num - 1) * 24 * 60 * 60 * 1000 - 8 * 60 * 60 * 1000)
      t.setYear(t.getFullYear() - 70)
      return t
    }
  }
}
</script>

<style lang="scss" scoped>
.import {
  padding: 15px;
  .title {
    text-align: center;
    padding-bottom: 30px;
  }
}
</style>
